<template>
	<view class="wrap">
		<!-- <u-navbar  title="剑未配妥，出门已是江湖"></u-navbar> -->
		<view class="videoinner" v-if="showvideo">
			<view v-html="videoSrc" class="ownvideo"></view>
			<!-- 			<p class="title u-line-3 u-m-b-30" style="color: white">
				{{ videoInfo.videoTitle }}
			</p> -->
			<p style="color: white" :class="shows?'title t1':'title u-line-2'">
				{{ videoInfo.videoTitle }}
			</p>
			<span class="tbtn u-font-xs" @click="shows=!shows"
				v-show="videoInfo.videoTitle.length>50">{{shows?'收起':'展开'}}</span>
			<view class="manyliset" @click="goThemeList">
				<u-icon name="bookmark" size="32"></u-icon>
				<span class="u-font-sm">来自合集：{{videoInfo.specialName}}</span>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view style="color: white;position: absolute;top: 0;justify-content: space-between;width: 100%;padding: 30rpx;margin-top: 40rpx;"
			class="u-flex">
			<u-icon name="arrow-left" size="52" @click="goback"></u-icon>
			<u-icon name="zhuanfa" size="48" @click="share()"></u-icon>
		</view>
		<!-- 		   <view class="videoinner">
      <video
        src="http://47.94.154.233:9000/medical/common/472ddb901e714c88a6ab4f6a8f0a3c13.mp4"
        controls
      ></video>
      <p class="title u-line-3 u-m-b-30" style="color: white">
        {{ videoInfo.title }}
      </p>
      <p class="u-line-1 u-font-xs" style="color: white">
        上传时间:{{ videoInfo.cTime }}
      </p>
    </view> -->
		<view class="down_bar u-border-top" :style="{ height: swiperHeight + 'px' }">
			<view class="demo-tag">
				<view class="left">
					<u-tag :text='videoInfo.tips' mode="plain" shape="circle" type="success" />
				</view>
				<ul class="icons u-flex" style="zoom: 0.4;z-index: 999;">
					<li @click.stop="$noMultipleClicks(getVideoLikes, videoInfo.id)">
						<u-icon size="150" color="#ffffff" name="heart" v-if="videoInfo.hasLikes!=1"></u-icon>
						<u-icon size="150" color="#e85456" name="heart-fill" style="animation-duration: 500ms"
							class="animated swing" v-else></u-icon>
						<span v-show="this.videoInfo.thumbs!=0">{{videoInfo.thumbs}}</span>
					</li>
					<li @click.stop="$noMultipleClicks(getCollection, videoInfo.id)">
						<u-icon size="150" color="#ffffff" name="star" v-if="videoInfo.hasCollection!=1"></u-icon>
						<u-icon size="150" color="#F8CB4F" name="star-fill" style="animation-duration: 800ms"
							class="animated rubberBand" v-else> </u-icon>
						<span v-show="this.videoInfo.collection!=0">{{videoInfo.collection}}</span>

					</li>
					<li @click="chatOpen()">
						<u-icon size="150" color="#ffffff" name="chat"></u-icon>
						<span v-show="this.newlist.length!=0">{{newlist.length}}</span>
					</li>
				</ul>
			</view>
		</view>
		<view class="tools">
			<u-popup v-model="show" mode="bottom" height="500px" border-radius="28" @close="listenclose()">
				<view>
					<hb-comment ref="hbComment" @add="add" @del="del" @like="like" @addchild="addchild"
						:deleteTip="'确认删除？'" :cmData="commentData" v-if="commentData"></hb-comment>
				</view>
			</u-popup>
			<u-popup v-model="showshare" mode="bottom">
			  <ul class="icons">
			    <li @click="sharewx">
			      <u-icon size="90" color="#00D86D" name="weixin-circle-fill"></u-icon>
			      <span>微信</span>
			    </li>
			    <li @click="sharewQzone">
			      <u-icon size="90" color="#37E8B8" name="moments-circel-fill"></u-icon>
			      <span>朋友圈</span>
			    </li>
			  </ul>
			</u-popup>
			<u-toast ref="uToast" />
			<u-toast ref="uToastwarns" />
			<u-modal v-model="showdelete" :content="content" @confirm="deleteDone()" :show-cancel-button="true">
			</u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shows: false,
				show: true, //弹出层
				showshare:false,//分享弹出层
				swiperHeight: "", //计算剩余高度
				commentData: null,
				newlist: [],
				videoInfo: {},
				cont: "", //评论内容
				addchildConcent: {
					id: "",
					parentId: "",
					fromId: "",
					top: 1,
				},
				ownid: "", //当前用户id
				showdelete: false,
				content: "是否删除该评论?",
				noClick: true,
				showvideo:true //视频层
			};
		},
		computed: {
			//muted controlslist="nodownload"	controls="controls"     autoplay="autoplay" poster="" webkit-playsinline="" playsinline=""
			videoSrc: function() {
				return `<video src="${this.videoInfo.videoUrl}"    style="height:90vh;width:100%"  autoplay="autoplay" controls  ></video>`
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.obj));
			console.log(item)
			this.videoInfo = item
			this.getVideoComment();

		},
		onHide() {
			this.showvideo=false
		},
		onShow() {
			this.showvideo = true
		},
		onReady: function(res) {
			var _this = this;
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery();
					query.select(".down_bar").boundingClientRect();
					query.exec(function(res) {
						_this.height = resu.windowHeight - res[0].top;
						_this.swiperHeight = _this.height;
					});
				},
				fail: (res) => {},
			});
		},
		methods: {
			//返回上一层
			goback() {
				uni.navigateBack({

				})
			},
			//去分享
			share(){
				this.showshare  = true
			},
			sharewx() {
			  //分享给微信好友
			  uni.share({
			    provider: "weixin",
			    scene: "WXSceneSession",
			    type: 0,
			    href: "https://linehealth.cn/share1?id=" + this.videoInfo.id + "&type=" + 3,
			    //href: "http://39.98.118.19:8096/share1?id=" + this.id + "&type=" + 2,
			 title: this.videoInfo.videoTitle,
			 summary:  this.videoInfo.videoTitle,
			 imageUrl: this.videoInfo.videoImgUrl,
			  });
			  this.addshareNum();
			  this.readshareNum(); //读取分享数
			},
			sharewQzone() {
				videoInfo
			  //分享给微信朋友圈
			  uni.share({
			    provider: "weixin",
			    scene: "WXSenceTimeline",
			    type: 0,
			    href: "https://linehealth.cn/share1?id=" + this.videoInfo.id + "&type=" + 3,
			    //href: "http://39.98.118.19:8096/share1?id=" + this.id + "&type=" + 2,
			    title: this.videoInfo.videoTitle,
			    summary:  this.videoInfo.videoTitle,
			    imageUrl: this.videoInfo.videoImgUrl,
			  });
			  this.addshareNum();
			  this.readshareNum(); //读取分享数
			},
			//去专题页面
			goThemeList() {
				const {
					specialId,
					specialName
				} = this.videoInfo
				uni.navigateTo({
					url: `zhuanti_page?title=${specialName}&id=${specialId}`
				})
			},
			//视频点赞
			getVideoLikes(id) {
				this.config.get('/projectionHall/giveVideoLikes', {
					videoId: id
				}).then(res => {
					if (res.data.code == 200) {
						this.videoInfo.hasLikes = !this.videoInfo.hasLikes
						if (this.videoInfo.hasLikes == false && this.videoInfo.thumbs > 0) {
							this.videoInfo.thumbs = this.videoInfo.thumbs - 1;
						} else {
							this.videoInfo.thumbs = this.videoInfo.thumbs + 1;
						}
					}
				})
			},
			//视频收藏
			getCollection(id) {
				this.config.get('/projectionHall/giveVideoCollection', {
					videoId: id
				}).then(res => {
					this.videoInfo.hasCollection = !this.videoInfo.hasCollection
					if (this.videoInfo.hasCollection == false && this.videoInfo.collection > 0) {
						this.videoInfo.collection = this.videoInfo.collection - 1;
					} else {
						this.videoInfo.collection = this.videoInfo.collection + 1;
					}
				})
			},
			showToast() {
				this.$refs.uToast.show({
					title: "评论成功",
					type: "success",
				});
			},
			showToastWarn() {
				this.$refs.uToastwarns.show({
					title: "当前评论有敏感词，请检查",
					type: "warning",
				});
			},
			del(id) {
				this.showdelete = true;
				this.ownid = id;
			},
			deleteDone(id) {
				this.config
					.get("/projectionHall/deleteComment", {
						id: this.ownid,
					})
					.then((res) => {
						console.log(res);
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.msg
							})
							this.getVideoComment();
						}
					});
			},
			//子评论内容
			addchild(obj) {
				const {
					id,
					parentId,
					fromId,
					top
				} = obj;
				console.log(obj);
				this.addchildConcent.id = id;
				this.addchildConcent.parentId = parentId;
				this.addchildConcent.fromId = fromId;
				this.addchildConcent.top = top;
			},
			//评论接口
			add(obj) {
				const {
					content
				} = obj;
				this.cont = content;
				if (!this.addchildConcent.top == 0) {
					this.handAddConten(content);
				} else {
					this.childAddConten(content);
				}
			},
			//增加新评论
			handAddConten(content) {
				this.$refs.hbComment.closeInput(); //关闭输入框
				this.config
					.get("/projectionHall/doCommentMain", {
						voidId: this.videoInfo.id,
						content: content,
					})
					.then((res) => {
						console.log(res);
						if (res.data.code != 200) {
							this.showToastWarn();
							return false;
						} else {
							this.showToast();
							this.$refs.hbComment.closeInput(); //关闭输入框
							this.getVideoComment();
							this.getPin()

						}
					});
			},
			//回复子评论
			childAddConten(content) {
				this.$refs.hbComment.closeInput(); //关闭输入框
				this.config
					.get("/projectionHall/doCommentPersonal", {
						voidId: this.videoInfo.id,
						content: content,
						commentId: this.addchildConcent.parentId || this.addchildConcent.id,
						fromId: this.addchildConcent.fromId,
						toPersonalId: this.addchildConcent.id
					})
					.then((res) => {
						if (res.data.code != 200) {
							this.showToastWarn();
							return false;
						} else {
							this.showToast();
							this.$refs.hbComment.closeInput(); //关闭输入框
							setTimeout(() => {
								this.getVideoComment();
							}, 500);
						}
					});
			},
			//点赞接口
			like(cid) {
				this.$refs.hbComment.likeComplete(cid); //模拟点赞
				this.config
					.get("/projectionHall/giveThumbs", {
						commentId: cid,
					})
					.then((res) => {
						console.log(res);
					});
			},
			//获取评论
			getVideoComment() {
				this.config
					.get("/projectionHall/getCommentbyVideoId", {
						videoId: this.videoInfo.id,
					})
					.then((res) => {
						if (res.data.code != -1) {
							this.newlist = res.data.data;
							this.getPin();
						} else {
							this.newlist = []
						}
					});
			},
			chatOpen() {
				this.show = true;
				this.getVideoComment(); //获取评论
				this.getPin();
			},
			listenclose(){
				uni.navigateBack({})
			},
			getPin() {
				this.commentData = {
					commentSize: this.newlist.length,
					comment: this.getTree(this.newlist),
				};
			},
			getTree(data) {
				let result = [];
				let map = {};
				data.forEach((item) => {
					map[item.id] = item;
				});
				data.forEach((item) => {
					let parent = map[item.parentId];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;
			},
		},
	};
</script>
<style>
	page {
		background-color: #000000;
	}
</style>
<style lang="scss">
	.wrap {
		position: relative;

		.videoinner {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			position: relative;

			.tbtn {
				position: absolute;
				right: 35%;
				bottom: 126rpx;
				color: #E5E8E8;
			}

			.manyliset {
				position: absolute;
				bottom: 0;
				color: white;
				padding: 15rpx;
				width: 100%;
				background-color: rgba($color: #ffffff, $alpha: 0.2);
				display: inline-flex;
				justify-content: space-between;
				align-items: center;
				height: 60rpx;

				span {
					flex: 1;
					margin-left: 20rpx;
				}
			}

			.ownvideo {
				width: 100%;
				height: 92vh;
			}

			p.title {
				width: 60%;
				height: 100rpx;
				position: absolute;
				bottom: 130rpx;
				padding: 20rpx;
				box-sizing: border-box;
				color: white;
				z-index: 99;
				overflow: hidden;
				// overflow-y: scroll;
			}

			.t1 {
				height: 184rpx !important;
				bottom: 120rpx !important;
				overflow-y: scroll !important;
			}
		}

		.down_bar {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.demo-tag {
				width: 100%;
				color: white;
				display: flex;
				justify-content: flex-end;

				.left {
					flex: 1;
					margin-left: 50rpx;
				}

				ul {
					display: flex;
					width: 427px;
					list-style: none;
					justify-content: space-between;
					padding: 0 200rpx;

					li {
						display: flex;
						align-items: center;
						font-size: 64rpx;
						font-weight: bold;
					}
				}
			}
		}
		ul.icons {
		  list-style: none;
		  height: 120rpx;
		
		  li {
		    width: 50px;
		    float: left;
		    display: flex;
		    // flex-direction: column;
		    align-items: center;
		    font-size: 15px;
		    color: #535353;
		  }
		}
	}
</style>
